<template>
    <button type="submit" class="btn"
            :class="[buttonColor, buttonBlock, buttonScale]"
            @click="onClick">{{ text }}</button>
</template>

<style>
</style>

<script>
  export default{
    props: {
      text: {
        type: String,
        require: false
      },
      color: {
        type: String,
        default: 'default'
      },
      blocked: {
        type: Boolean,
        default: false
      },
      scale: {
        type: String
      }
    },
    computed: {
      buttonColor: function () {
        return 'btn-' + this.color
      },
      buttonBlock: function () {
        return this.blocked ? 'btn-block' : ''
      },
      buttonScale: function () {
        return this.scale ? 'btn-' + this.scale : ''
      }
    },
    vuex: {
      actions: {
        onClick: function (store, e) {
          let self = this
          store.dispatch('ON_CLICK', self, e)
        }
      }
    }
  }
</script>
